<template>
  <div class="dialog">
    <n-card size="medium" style="margin-bottom: 20px">
      <n-button type="info" size="medium" @click="showDialog = !showDialog">
        打开弹窗
      </n-button>
    </n-card>

    <n-card title="弹窗配置" size="medium">
      <pro-form v-model:form="setting" :options="options" :formProps="form" />
    </n-card>

    <pro-dialog
      v-model:showDialog="showDialog"
      :modalProps="modalProps"
      :loading="setting.loading"
      :drag="setting.drag"
      :showButton="setting.showButton"
      :top="setting.top"
      :bottom="setting.bottom"
      :fullscreen="setting.fullscreen"
      @handleCancel="handleEvent('cancel')"
      @handleConfirm="handleEvent('confirm')"
      @dialogVisiableChange="
        (val) => {
          handleEvent('show', val)
        }
      "
      @handleFullScreenChange="
        (val) => {
          handleEvent('fullscreen', val)
        }
      "
    >
      <template #icon v-if="setting.useSlot">
        {{ setting.iconSlot }}
      </template>
      <template #header v-if="setting.useSlot">
        {{ setting.headerSlot }}
      </template>
      <template v-if="setting.useSlot">
        {{ setting.defaultSlot }}
      </template>
      <template #footer v-if="setting.useSlot">
        {{ setting.footerSlot }}
      </template>
    </pro-dialog>
  </div>
</template>

<script lang="ts" setup name="dialog">
  import type { ModalProps as ModalPropsType } from 'naive-ui'
  import { Ref } from 'vue'

  type settingType = {
    showIcon?: ModalPropsType['showIcon']
    drag?: boolean
    fullscreen?: boolean
    showButton?: boolean
    loading?: boolean
    useSlot?: boolean
    top?: number | string
    bottom?: number | string
    iconSlot?: any
    headerSlot?: any
    defaultSlot?: any
    footerSlot?: any
  }
  const showDialog = ref(false)
  // form配置对象
  const form = {
    'label-placement': 'left'
  }
  // 配置对象
  const setting: Ref<settingType> = ref({
    showIcon: true,
    drag: true,
    fullscreen: true,
    showButton: true,
    loading: false,
    useSlot: false,
    top: '50px',
    bottom: '50px',
    iconSlot: '1',
    headerSlot: '我是标题',
    defaultSlot: '我是内容',
    footerSlot: '我是按钮'
  })
  const showIcon = computed(() => {
    return setting.value.showIcon
  })
  const modalProps = ref({
    show: false,
    showIcon: showIcon
  })
  // formItem配置
  const options = [
    {
      grid: {
        cols: '6'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'switch',
            label: '显示头部图标',
            labelWidth: 120,
            key: 'showIcon'
          }
        },
        {
          formItem: {
            formType: 'switch',
            label: '支持拖拽',
            key: 'drag'
          }
        },
        {
          formItem: {
            formType: 'switch',
            label: '支持全屏',
            key: 'fullscreen'
          }
        },
        {
          formItem: {
            formType: 'switch',
            label: '使用插槽',
            key: 'useSlot'
          }
        },
        {
          formItem: {
            formType: 'switch',
            label: '显示底部按钮',
            labelWidth: 120,
            key: 'showButton'
          }
        },
        {
          formItem: {
            formType: 'switch',
            label: '显示loading状态',
            labelWidth: 120,
            key: 'loading'
          }
        }
      ]
    },
    {
      grid: {
        cols: '3'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'input',
            label: '上边距',
            key: 'top'
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '下边距',
            key: 'bottom'
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '头部插槽内容',
            labelWidth: 100,
            key: 'headerSlot'
          }
        }
      ]
    },
    {
      grid: {
        cols: '3'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'input',
            label: '头部图标插槽(需要打开头部图标显示)',
            labelWidth: 240,
            key: 'iconSlot'
          }
        },

        {
          formItem: {
            formType: 'input',
            label: '默认插槽内容',
            labelWidth: 120,
            key: 'defaultSlot'
          }
        },
        {
          formItem: {
            formType: 'input',
            labelWidth: 120,
            label: '底部按钮插槽内容',
            key: 'footerSlot'
          }
        }
      ]
    }
  ]

  const handleEvent = (type: string, value?: any) => {
    let msg = '事件触发'
    if (type === 'cancel') msg = '取消按钮点击'
    if (type === 'confirm') msg = '确认按钮点击'
    if (type === 'show') msg = value ? '弹窗打开' : '弹窗关闭'
    if (type === 'fullscreen') msg = value ? '进入全屏' : '退出全屏'
    window['$message'].success(msg)
  }
</script>

<style lang="less" scoped></style>
